<template>
    <div class="subheadings">
        {{ title }}
    </div>
    <div class="assy">
        <CollectionSituation :listData="dataList" />
    </div>
</template>

<script setup>
import { getSurveyPointSituation,getBuildMonomerCount,getDamagePointSituationCount } from '@/api/provincePreEvaluation.js';
import CollectionSituation from "./CollectionSituation"
const props = defineProps({
    index: Number,
    code:String,
    provinceName:String
})
const dataList = ref([])
const title = ref('');

watch(() => props.index, val => {
    if (val == 0) {
        title.value = `抽样调查点采集情况统计（${props.provinceName}）`
        getData()
    } else if (val == 1) {
        title.value = `房屋建筑物单体采集情况（${props.provinceName}）`
        getData2()
    } else if (val == 2) {
        title.value = `灾害风险点采集情况（${props.provinceName}）`
        getData3()
    }
}, { deep: true, immediate: true });



// 获取页面数据
function getData() {
    getSurveyPointSituation({code:props.code}).then((res) => {
        dataList.value = res.data;
    });
}

function getData2() {
    getBuildMonomerCount({code:props.code}).then((res) => {
        dataList.value = res.data;
    });
}

function getData3() {
    getDamagePointSituationCount({code:props.code}).then((res) => {
        dataList.value = res.data;
    });
}

</script>
<style scoped lang="scss">
.subheadings {
    width: 450px;
    height: 105px;
    background-size: 100% 100%;
    background-image: url(/src/assets/images/common/bg_little_title.png);
    margin: 0 auto;
    color: #E4F5FF;
    font-size: 22px;
    font-family: Source Han Sans;
    font-weight: 500;
    line-height: 80px;
    text-align: left;
    box-sizing: border-box;
    padding-left: 40px;
    display: flex;
    justify-content: left;
}

.assy {
    
}
</style>